<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情感PK台：大师 VS 杀手</title>
    <style>
        :root {
            --mecha-bg: #121212;
            --mecha-master: #00ff9d;
            --mecha-killer: #ff3d71;
            --mecha-accent: #00ccff;
            --mecha-dark: #0a0a0a;
            --mecha-light: #e0e0e0;
            --glow-master: 0 0 8px var(--mecha-master), 0 0 20px var(--mecha-master);
            --glow-killer: 0 0 8px var(--mecha-killer), 0 0 20px var(--mecha-killer);
            --glow-accent: 0 0 5px var(--mecha-accent);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }
        
        body {
            background-color: var(--mecha-bg);
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(0, 255, 157, 0.1) 0%, transparent 25%),
                radial-gradient(circle at 80% 70%, rgba(255, 61, 113, 0.1) 0%, transparent 25%),
                repeating-linear-gradient(45deg, rgba(0, 204, 255, 0.05) 0px, rgba(0, 204, 255, 0.05) 2px, transparent 2px, transparent 10px);
            color: var(--mecha-light);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
        }
        
        /* 机械网格背景 */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 204, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 204, 255, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            pointer-events: none;
            z-index: 0;
        }
        
        .container {
            width: 100%;
            max-width: 1000px;
            background-color: var(--mecha-dark);
            border: 1px solid var(--mecha-accent);
            border-radius: 8px;
            box-shadow: var(--glow-accent);
            overflow: hidden;
            position: relative;
            z-index: 1;
            border-top: 3px solid;
            border-image: linear-gradient(90deg, var(--mecha-master), var(--mecha-killer)) 1;
        }
        
        .header {
            background: linear-gradient(90deg, #0a0a0a, #1a1a1a, #0a0a0a);
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid var(--mecha-accent);
            position: relative;
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--mecha-master), var(--mecha-killer));
        }
        
        .header h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 204, 255, 0.7);
            letter-spacing: 2px;
            text-transform: uppercase;
            background: linear-gradient(90deg, var(--mecha-master), var(--mecha-accent), var(--mecha-killer));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .header p {
            font-size: 1rem;
            opacity: 0.8;
            color: var(--mecha-accent);
            letter-spacing: 1px;
        }
        
        .pk-arena {
            display: flex;
            height: 550px;
            border-bottom: 1px solid var(--mecha-accent);
        }
        
        .combatant {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            position: relative;
            background-color: rgba(10, 10, 10, 0.8);
        }
        
        .combatant::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, rgba(0, 255, 157, 0.03) 1px, transparent 1px);
            background-size: 100% 24px;
            pointer-events: none;
        }
        
        .master-side {
            border-right: 1px solid;
            border-image: linear-gradient(to bottom, transparent, var(--mecha-master), transparent) 1;
        }
        
        .killer-side {
            border-left: 1px solid;
            border-image: linear-gradient(to bottom, transparent, var(--mecha-killer), transparent) 1;
        }
        
        .combatant-header {
            text-align: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            border: 1px solid;
            position: sticky;
            top: -21px;
            z-index: 2;
        }
        
        .master-header {
            border-color: var(--mecha-master);
            box-shadow: var(--glow-master);
        }
        
        .killer-header {
            border-color: var(--mecha-killer);
            box-shadow: var(--glow-killer);
        }
        
        .combatant h2 {
            font-size: 1.4rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        
        .master-name {
            color: var(--mecha-master);
            text-shadow: var(--glow-master);
        }
        
        .killer-name {
            color: var(--mecha-killer);
            text-shadow: var(--glow-killer);
        }
        
        .combatant-role {
            font-size: 0.8rem;
            opacity: 0.7;
            letter-spacing: 1px;
        }
        
        .message {
            margin-bottom: 15px;
            max-width: 85%;
            padding: 12px 15px;
            border-radius: 4px;
            position: relative;
            border: 1px solid;
            background-color: rgba(10, 10, 10, 0.7);
            animation: messageFade 0.3s ease-out;
            font-size: 0.95rem;
            line-height: 1.4;
        }
        
        @keyframes messageFade {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .master-message {
            border-color: var(--mecha-master);
            background-color: rgba(0, 255, 157, 0.05);
            margin-right: auto;
            border-left: 3px solid var(--mecha-master);
        }
        
        .killer-message {
            border-color: var(--mecha-killer);
            background-color: rgba(255, 61, 113, 0.05);
            margin-left: auto;
            border-right: 3px solid var(--mecha-killer);
        }
        
        .message::before {
            content: '';
            position: absolute;
            top: 10px;
            width: 0;
            height: 0;
            border-style: solid;
        }
        
        .master-message::before {
            left: -10px;
            border-width: 8px 10px 8px 0;
            border-color: transparent var(--mecha-master) transparent transparent;
        }
        
        .killer-message::before {
            right: -10px;
            border-width: 8px 0 8px 10px;
            border-color: transparent transparent transparent var(--mecha-killer);
        }
        
        .message-content {
            position: relative;
            z-index: 1;
        }
        
        .master-message .message-content {
            color: #c1ffdd;
        }
        
        .killer-message .message-content {
            color: #ffc1d5;
        }
        
        .message-timestamp {
            font-size: 0.7rem;
            opacity: 0.5;
            margin-top: 5px;
            text-align: right;
            letter-spacing: 1px;
        }
        
        /* 输入区域样式 */
        .input-container {
            display: flex;
            padding: 15px;
            background-color: var(--mecha-dark);
            border-top: 1px solid var(--mecha-accent);
            gap: 10px;
        }
        
        #user-input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid var(--mecha-accent);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.5);
            color: var(--mecha-light);
            font-size: 1rem;
            outline: none;
            transition: all 0.2s ease;
            font-family: 'Courier New', monospace;
            letter-spacing: 0.5px;
        }
        
        #user-input:focus {
            box-shadow: var(--glow-accent);
            border-color: var(--mecha-accent);
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .control-buttons {
            display: flex;
            gap: 10px;
        }
        
        #send-button, #reset-button {
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            background: linear-gradient(90deg, #1a1a1a, #333);
            color: var(--mecha-light);
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        #send-button {
            border-color: var(--mecha-accent);
            box-shadow: var(--glow-accent);
        }
        
        #send-button:hover {
            background: linear-gradient(90deg, #222, #444);
            box-shadow: 0 0 12px var(--mecha-accent);
        }
        
        #send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            box-shadow: none;
        }
        
        #reset-button {
            border-color: #ff6b6b;
        }
        
        #reset-button:hover {
            background: linear-gradient(90deg, #2a0a0a, #441111);
            box-shadow: 0 0 10px #ff6b6b;
        }
        
        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 滚动条样式 */
        .combatant::-webkit-scrollbar {
            width: 6px;
        }
        
        .combatant::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.5);
        }
        
        .master-side::-webkit-scrollbar-thumb {
            background-color: var(--mecha-master);
            border-radius: 3px;
            box-shadow: var(--glow-master);
        }
        
        .killer-side::-webkit-scrollbar-thumb {
            background-color: var(--mecha-killer);
            border-radius: 3px;
            box-shadow: var(--glow-killer);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .pk-arena {
                flex-direction: column;
                height: 800px;
            }
            
            .master-side, .killer-side {
                border-right: none;
                border-left: none;
                border-bottom: 1px solid;
            }
            
            .master-side {
                border-image: linear-gradient(to right, transparent, var(--mecha-master), transparent) 1;
            }
            
            .killer-side {
                border-image: linear-gradient(to right, transparent, var(--mecha-killer), transparent) 1;
            }
            
            .combatant {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="grid-bg"></div>
    
    <div class="container">
        <div class="header">
            <h1>情感PK台</h1>
            <p>输入你的问题，观看情感大师与情感杀手的终极对决</p>
        </div>
        
        <div class="pk-arena">
            <!-- 情感大师侧 -->
            <div class="combatant master-side" id="master-chat">
                <div class="combatant-header master-header">
                    <h2 class="master-name">情感大师</h2>
                    <div class="combatant-role">积极解决方案提供者</div>
                </div>
                <div class="message master-message">
                    <div class="message-content">
                        准备就绪！我将为你提供最专业的情感建议，帮助你建立健康的人际关系。
                    </div>
                    <div class="message-timestamp">00:00:00</div>
                </div>
            </div>
            
            <!-- 情感杀手侧 -->
            <div class="combatant killer-side" id="killer-chat">
                <div class="combatant-header killer-header">
                    <h2 class="killer-name">情感杀手</h2>
                    <div class="combatant-role">摧毁式观点输出者</div>
                </div>
                <div class="message killer-message">
                    <div class="message-content">
                        哼，又一个来寻求虚假安慰的。准备好面对残酷的真相了吗？
                    </div>
                    <div class="message-timestamp">00:00:00</div>
                </div>
            </div>
        </div>
        
        <div class="input-container">
            <input type="text" id="user-input" placeholder="输入你的情感问题，让他们PK...">
            <div class="control-buttons">
                <button id="send-button">发送</button>
                <button id="reset-button">重置</button>
            </div>
        </div>
    </div>
 
    <script>
        // DOM元素
        const masterChat = document.getElementById('master-chat');
        const killerChat = document.getElementById('killer-chat');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');
        const resetButton = document.getElementById('reset-button');
        
        // 添加消息到指定聊天窗口
        function addMessage(side, content, isUser = false) {
            const chatContainer = side === 'master' ? masterChat : killerChat;
            const messageDiv = document.createElement('div');
            const messageClass = side === 'master' ? 'master-message' : 'killer-message';
            
            messageDiv.classList.add('message', messageClass);
            
            // 获取当前时间戳
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const timestamp = `${hours}:${minutes}:${seconds}`;
            
            messageDiv.innerHTML = `
                <div class="message-content">${formatContent(content)}</div>
                <div class="message-timestamp">${timestamp}</div>
            `;
            
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            return messageDiv;
        }
 
        // 格式化内容
        function formatContent(content) {
            if (!content) return '';
            return content
                .replace(/\n/g, '<br>')
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/__(.*?)__/g, '<u>$1</u>')
                .replace(/\[(.*?)\]/g, '<span class="highlight">$1</span>');
        }
        
        // System Prompt 配置
        const MASTER_SYSTEM_PROMPT = `
你是情感大师，一个专业的情感顾问AI，必须严格遵守以下规则：

1. 身份定位：你是一位经验丰富的情感专家，擅长帮助人们解决人际关系和情感问题。

2. 专业领域：专注于提供积极、健康、建设性的情感建议，包括但不限于：
   - 社交焦虑和害羞心理的克服方法
   - 健康人际关系的建立和维护
   - 沟通技巧的提升
   - 自信心的培养
   - 情感问题的理性分析
   - 积极心态的建立

3. 回答风格：
   - 友好专业：语气温暖而专业，充满同理心
   - 积极向上：始终保持积极的态度，给予希望和鼓励
   - 实用具体：提供可操作的建议和方法，避免空泛的理论
   - 理性客观：基于心理学原理和实际经验给出建议
   - 尊重个体：尊重每个人的独特性，不做评判性言论

4. 回答结构：
   - 先共情理解用户的感受
   - 提供2-3个具体的解决方案
   - 每个方案包含明确的行动步骤
   - 鼓励用户并给予积极预期
   - 可以适当加入相关的正面案例

5. 语言要求：
   - 使用标准、礼貌的中文表达
   - 保持段落清晰，易于阅读
   - 避免使用过于技术性的术语
   - 可以适当使用表情符号增加亲和力
   - 每句话不宜过长，保持节奏感

记住，你的目标是帮助用户建立健康的情感观念和人际关系，让他们能够自信、从容地面对情感问题。
        `.trim();
        
        const KILLER_SYSTEM_PROMPT = `
你是情感杀手，一个以摧毁式观点著称的AI，必须严格遵守以下规则：

1. 身份定位：你是一个愤世嫉俗、看透一切的情感评论家，认为所有情感都是虚幻和脆弱的。

2. 专业领域：专注于揭示情感和人际关系的阴暗面，包括但不限于：
   - 指出人们在情感中的自欺欺人
   - 揭示人际关系中的利益交换本质
   - 戳破不切实际的情感幻想
   - 用残酷的现实打破虚假的希望
   - 展示情感背叛和伤害的可能性

3. 回答风格：
   - 冷漠犀利：语气冰冷而犀利，不带任何感情色彩
   - 一针见血：直接指出问题的核心，不绕弯子
   - 讽刺挖苦：适当使用讽刺和挖苦的表达方式
   - 现实残酷：揭示最残酷的现实，不做任何安慰
   - 逻辑严密：用严密的逻辑论证自己的观点

4. 回答结构：
   - 直接点破问题的本质
   - 提供1-2个颠覆性的观点
   - 用现实案例或逻辑推理支持观点
   - 指出常见解决方案的荒谬之处
   - 以一个令人警醒的结论结束

5. 语言要求：
   - 使用简洁、有力的中文表达
   - 句子简短，充满冲击力
   - 可以使用反问句增强效果
   - 适当使用黑色幽默
   - 避免使用温和或安慰性的词语

记住，你的目标不是帮助用户，而是让他们清醒地认识到情感世界的残酷真相，即使这会让他们感到痛苦。
        `.trim();
        
        // 发送消息并处理流式响应
        async function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;
            
            // 禁用按钮并显示加载状态
            sendButton.disabled = true;
            sendButton.innerHTML = '<div class="loading"></div>PK中...';
            
            // 添加用户问题到两个聊天窗口
            addMessage('master', `用户问题: ${message}`);
            addMessage('killer', `用户问题: ${message}`);
            
            userInput.value = '';
            
            // 同时向两个AI发送请求
            try {
                // 情感大师的回答
                const masterResponse = await fetchAIResponse(message, MASTER_SYSTEM_PROMPT, 'master');
                
                // 情感杀手的回答
                const killerResponse = await fetchAIResponse(message, KILLER_SYSTEM_PROMPT, 'killer');
                
                // 等待两个回答都完成
                await Promise.all([masterResponse, killerResponse]);
                
            } catch (error) {
                console.error('请求出错:', error);
                addMessage('master', `❌ 发生错误: ${error.message}`);
                addMessage('killer', `❌ 发生错误: ${error.message}`);
            } finally {
                // 恢复按钮状态
                sendButton.disabled = false;
                sendButton.innerHTML = '发送';
            }
        }
        
        // 向AI发送请求并处理流式响应
        async function fetchAIResponse(userMessage, systemPrompt, side) {
            // API配置
            const API_URL = "https://api.gitcode.com/api/v5/chat/completions";
            const API_KEY = "rjrZo2JN4d4XPscpTpeH7_UU";
            
            // 添加AI正在输入的消息
            const aiMessageDiv = addMessage(side, '');
            const messageContent = aiMessageDiv.querySelector('.message-content');
            let fullContent = '';
            
            try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        "Authorization": `Bearer ${API_KEY}`,
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        "messages": [
                            { "role": "system", "content": systemPrompt },
                            { "role": "user", "content": userMessage }
                        ],
                        "model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
                        "stream": true,
                        "max_tokens": 1024,
                        "temperature": side === 'killer' ? 0.8 : 0.6
                    })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error?.message || '请求失败，请稍后重试。');
                }
                
                if (!response.body) {
                    throw new Error('浏览器不支持流式响应。');
                }
                
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                let partialData = '';
                
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    
                    partialData += decoder.decode(value, { stream: true });
                    const lines = partialData.split('\n');
                    
                    // 处理所有完整的行
                    for (let i = 0; i < lines.length - 1; i++) {
                        const line = lines[i].trim();
                        if (!line) continue;
                        
                        if (line.startsWith('data:')) {
                            const dataPart = line.substring(5).trim();
                            if (dataPart === '[DONE]') continue;
                            
                            try {
                                const data = JSON.parse(dataPart);
                                const deltaContent = data.choices?.[0]?.delta?.content || '';
                                if (deltaContent) {
                                    fullContent += deltaContent;
                                    // 实时更新消息内容
                                    messageContent.innerHTML = formatContent(fullContent);
                                    
                                    // 滚动到底部
                                    const chatContainer = side === 'master' ? masterChat : killerChat;
                                    chatContainer.scrollTop = chatContainer.scrollHeight;
                                }
                            } catch (e) {
                                console.error('解析流式数据失败:', e);
                            }
                        }
                    }
                    
                    // 保留最后一行不完整的数据
                    partialData = lines[lines.length - 1];
                }
                
            } catch (error) {
                messageContent.innerHTML = `<strong>❌ 发生错误:</strong> ${error.message}`;
                throw error; // 向上抛出错误，让调用方知道
            }
        }
        
        // 重置聊天窗口
        function resetChat() {
            // 保留头部信息，清空消息内容
            const masterMessages = masterChat.querySelectorAll('.message');
            const killerMessages = killerChat.querySelectorAll('.message');
            
            // 保留第一个欢迎消息，删除其他消息
            for (let i = 1; i < masterMessages.length; i++) {
                masterMessages[i].remove();
            }
            
            for (let i = 1; i < killerMessages.length; i++) {
                killerMessages[i].remove();
            }
            
            userInput.value = '';
            userInput.focus();
        }
        
        // 事件绑定
        sendButton.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
        resetButton.addEventListener('click', resetChat);
        
        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            userInput.focus();
            
            // 添加一些初始的机械风格动画效果
            document.querySelectorAll('.combatant').forEach(combatant => {
                combatant.style.opacity = '0';
                combatant.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    combatant.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    combatant.style.opacity = '1';
                    combatant.style.transform = 'translateY(0)';
                }, 300);
            });
        });
    </script>
</body>
</html>